<template>
  <div class="disharmony">
    <div class="answerTitle">
      <span :class="type">{{ (type === 'md' && '矛盾题') || (type === 'ab' && 'AB题') || (type === 'gt' && '共同题') }}不和谐项</span>
      <el-button type="primary" @click="addDisharmony">添加不和谐项</el-button>
    </div>
    <el-row v-for="(answerItem, answerIndex) in disharmonyList" :key="answerIndex" class="answerContainer">
      <template v-if="type === 'md'">
        <el-col :span="6">
          <label for="questionsOneOptionId" class="el-form-item__label">题目1</label>
          <el-select
            v-model="answerItem.questionsOneOptionId"
            filterable
            clearable
            placeholder="请选择题目1"
            @change="setOptionLabel(answerItem.questionsOneOptionId, answerItem, { optionName: 'one', fieldName: 'questionsOneOptionTitle' })"
          >
            <el-option
              v-for="(optionItem, optionIndex) in optionListMap.one"
              :key="optionIndex"
              :label="optionItem.label"
              :value="optionItem.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <label for="questionsTwoOptionId" class="el-form-item__label">题目2</label>
          <el-select
            v-model="answerItem.questionsTwoOptionId"
            filterable
            clearable
            placeholder="请选择题目2"
            @change="setOptionLabel(answerItem.questionsTwoOptionId, answerItem, { optionName: 'two', fieldName: 'questionsTwoOptionTitle' })"
          >
            <el-option
              v-for="(optionItem, optionIndex) in optionListMap.two"
              :key="optionIndex"
              :label="optionItem.label"
              :value="optionItem.value"
            ></el-option>
          </el-select>
        </el-col>
      </template>
      <template v-else-if="type === 'ab'">
        <el-col :span="6">
          <label for="manQuestionsOptionId" class="el-form-item__label">男生题</label>
          <el-select
            v-model="answerItem.manQuestionsOptionId"
            filterable
            clearable
            placeholder="请选择男生题"
            @change="setOptionLabel(answerItem.manQuestionsOptionId, answerItem, { optionName: 'man', fieldName: 'manQuestionsOptionTitle' })"
          >
            <el-option
              v-for="(optionItem, optionIndex) in optionListMap.man"
              :key="optionIndex"
              :label="optionItem.label"
              :value="optionItem.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <label for="womanQuestionsOptionId" class="el-form-item__label">女生题</label>
          <el-select
            v-model="answerItem.womanQuestionsOptionId"
            filterable
            clearable
            placeholder="请选择女生题"
            @change="setOptionLabel(answerItem.womanQuestionsOptionId, answerItem, { optionName: 'woman', fieldName: 'womanQuestionsOptionTitle' })"
          >
            <el-option
              v-for="(optionItem, optionIndex) in optionListMap.woman"
              :key="optionIndex"
              :label="optionItem.label"
              :value="optionItem.value"
            ></el-option>
          </el-select>
        </el-col>
      </template>
      <template v-else-if="type === 'gt'">
        <el-col :span="6">
          <label for="currentQuestionsOptionId" class="el-form-item__label">当前题</label>
          <el-select
            v-model="answerItem.currentQuestionsOptionId"
            filterable
            clearable
            placeholder="请选择当前题"
            @change="setOptionLabel(answerItem.currentQuestionsOptionId, answerItem, { optionName: 'gt', fieldName: 'currentQuestionsOptionTitle' })"
          >
            <el-option v-for="(optionItem, optionIndex) in optionListMap.gt" :key="optionIndex" :label="optionItem.label" :value="optionItem.value"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <label for="mustAnswerQuestionsOptionId" class="el-form-item__label">必答题</label>
          <el-select
            v-model="answerItem.mustAnswerQuestionsOptionId"
            filterable
            clearable
            placeholder="请选择必答题"
            @change="setOptionLabel(answerItem.mustAnswerQuestionsOptionId, answerItem, { optionName: 'gt', fieldName: 'mustAnswerQuestionsOptionTitle' })"
          >
            <el-option v-for="(optionItem, optionIndex) in optionListMap.gt" :key="optionIndex" :label="optionItem.label" :value="optionItem.value"></el-option>
          </el-select>
        </el-col>
      </template>
      <el-col :span="6">
        <el-button type="danger" @click="() => disharmonyList.splice(answerIndex, 1)">X</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import cloneDeep from 'lodash/cloneDeep';
export default {
  // 答题选项
  name: 'Disharmony',
  props: {
    type: {
      type: String,
      default: 'gt',
    },
    // 组合题组别
    groupId: {
      type: Number,
      default: 0,
    },
    basicHarmonyItemList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    basicHarmonyItemList: {
      handler(val) {
        this.disharmonyList = cloneDeep(val);
      },
      deep: true,
      immediate: true,
    },
    disharmonyList: {
      handler(val) {
        this.$emit('update:harmonyItemList', val);
      },
      deep: true,
    },
  },
  data() {
    return {
      disharmonyList: [],
      optionListMap: {},
    };
  },
  methods: {
    init(disharmonyList) {
      this.disharmonyList = cloneDeep(disharmonyList || []);
    },
    setOptionList(optionList, optionKey) {
      this.$set(this.optionListMap, optionKey || this.type, optionList);
    },
    setOptionLabel(val, row, { optionName, fieldName, value = 'value', label = 'label' }) {
      const optionItem = this.optionListMap[optionName].find((item) => item[value] === val) || {};
      this.$set(row, fieldName, optionItem[label]);
    },
    addDisharmony() {
      this.disharmonyList.push({});
    },
  },
};
</script>
<style lang="scss" scoped>
.disharmony {
  padding: 30px 0;
  border-top: 1px solid #c0c4cc;
  .answerTitle {
    span {
      font-size: 14px;
      color: #606266;
      font-weight: bold;
      display: inline-block;
      width: 130px;
      text-align: right;
      padding-right: 15px;
      &.ab::before,
      &.md::before {
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }
  .answerContainer {
    margin-top: 10px;
    & ::v-deep .el-select,
    & ::v-deep .el-input {
      width: calc(100% - 130px);
    }
    & ::v-deep .el-form-item__label {
      width: 130px;
    }
    & ::v-deep .el-select .el-input {
      width: 100%;
    }
    & ::v-deep .el-col .el-button:first-child {
      margin-left: 130px;
    }
  }
}
</style>
